<template>
  <div id="list">
    <router-link to="/foot">
      <van-grid :column-num="5" :border="false" icon-size="40px">
      <van-grid-item v-for="item in list" :icon="item.footimg" :text="item.footname" />
    </van-grid>
    </router-link>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["list"]),
  },
  async mounted() {
    let url = "http://localhost:8080/data/list.json";
    let res = await this.$axios.get(url);
    this.$store.dispatch("getList", res.data);
  },
};
</script>

<style lang="less" scoped>
#list {
  margin-top: 10px;
  margin-bottom: 5px;
  height: 177px;
  .van-grid-item {
    height: 80px;
  }
}
</style>